<template>
	<view class="container">
		<!--登录-->
		<uni-card>
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item name="username">
					<uni-easyinput prefixIcon="person" type="text" v-model="formData.username" placeholder="用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput prefixIcon="locked" type="password" v-model="formData.password" placeholder="密码" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="clickLogin">登录</button>
			<view class="uni-flex" style="-webkit-justify-content: space-between;justify-content: space-between;">
				<navigator url="../userRegister/userRegister" open-type="redirect">
					<view class="text">没有账号？立即注册</view>
				</navigator>
				<navigator url="../userLogin/userLogin" open-type="redirect">
					<view class="text">忘记密码</view>
				</navigator>

			</view>

		</uni-card>
	</view>
</template>

<script lang="ts" setup>
	import api from '../../../../api/api'
	import {
		ref
	} from 'vue'
	const form = ref()
	const formData = ref({
		username: '',
		password: ''
	})
	const rules = ref({
		username: {
			rules: [{
				required: true,
				errorMessage: '请输入用户名'
			}]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '请输入密码'
			}, {
				minLength: 6,
				errorMessage: '密码至少为六位'
			}]
		}
	})
	/**
	 * 登录
	 */
	const clickLogin = () => {
		form.value.validate((valid) => {
					if (!valid) {
						uni.showLoading({
							title: '正在登录'
						})
						api.user.login(formData.value).then(res => {
							if (res.data.code == 0) {
								uni.setStorage({
									key: 'userInfo',
									data: res.data.data.userInfo,
									success: function() {
										console.log('success')
									}
								})
								uni.switchTab({
									url: '/pages/film/home/home'
								});
								uni.showToast({
									title: '登录成功',
									duration: 1000
								})
							}
							uni.hideLoading()
						})
					}
				})
	}
</script>

<style scoped>
	.container {
		margin: 20% auto;
	}

	.text {
		color: #3399ff;
		margin-top: 10px;
	}
</style>
